<template>
  <div id="physical">
    <topSearch :formInline="formInline" @toSearch="getList"></topSearch>
    <div class="table-conBtn">
      <el-button type="warning" icon="el-icon-upload2" @click="importBtn">
        导入
      </el-button>
      <el-button type="warning" icon="el-icon-download" @click="exportFile">
        导出
      </el-button>
    </div>
    <el-table :data="tableData" max-height="490" ref="elTable">
      <el-table-column type="index" width="55" label="序号">
        <template slot-scope="scope">
          {{
            scope.$index
              | filterPage(searchParams.pageNum, searchParams.pageSize)
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="goodsName"
        label="商品名称"
        min-width="180"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="orderStatus"
        label="订单状态"
        width="80"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.orderStatus == 'UNSHIPPED'"> 未发货 </span>
          <span v-if="scope.row.orderStatus == 'SHIPPED'"> 已发货 </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="createdByUser.userName"
        label="用户名"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="createdByUser.dpAccount"
        label="大鹏号"
        width="120"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="deliveryAddress.deliveryName"
        label="收货人"
        width="120"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="deliveryAddress.hidePhone"
        label="收货人手机号"
        width="120"
        align="center"
      >
      </el-table-column>
      <el-table-column label="活动类型" width="150" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.activityType == 'INVITE_ACTIVITY'">
            邀请活动
          </span>
          <span v-if="scope.row.activityType == 'TURNTABLE_LOTTERY'">
            转盘抽奖活动
          </span>
          <span v-if="scope.row.activityType == 'GONGGE_LOTTERY'">
            宫格抽奖活动
          </span>
          <span v-if="scope.row.activityType == 'TURNOVER_DRAW_LOTTERY'">
            翻牌抽奖活动
          </span>
          <span v-if="scope.row.activityType == 'TURN_INTRODUCE_ACTIVITY'">
            顾问转介绍
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="activityName"
        label="活动名称"
        min-width="200"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="courierCompany"
        label="快递公司"
        min-width="200"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="trackingNumber"
        label="快递号"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column label="地址" width="220" align="center">
        <template slot-scope="scope">
          <span
            >{{ scope.row.deliveryAddress.province
            }}{{ scope.row.deliveryAddress.city
            }}{{ scope.row.deliveryAddress.district
            }}{{ scope.row.deliveryAddress.particularAddress }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="updateByUser.userName"
        label="操作人"
        width="120"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="updateDate"
        label="操作时间"
        width="180"
        align="center"
      >
      </el-table-column>
      <el-table-column label="操作" width="120" align="center">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.orderStatus == 'UNSHIPPED'"
            @click="deliverGoods(scope.row)"
            type="text"
            size="small"
            >发货</el-button
          >
          <el-button
            v-if="scope.row.orderStatus == 'SHIPPED'"
            style="color:red"
            type="text"
            size="small"
            >已发货</el-button
          >
          <el-button type="text" size="small" @click="showEdit(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <edit
      v-if="editForm.show"
      :formInline="editForm"
      :editData="editData"
      @compile="compile"
      @complete="complete"
    ></edit>
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="getList"
    ></pageCom>

    <!-- 发货弹框 -->
    <el-dialog width="400px" title="系统提示" :visible.sync="dialogFormVisible">
      <el-form
        :model="information"
        label-position="top"
        :rules="rules"
        ref="delivery"
      >
        <el-form-item label="请输入快递公司" prop="company">
          <el-select
            v-model="information.company"
            style="width:100%"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in activesOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请输入单号" prop="order">
          <el-input
            v-model.trim="information.order"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="success" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 导入弹窗 -->
    <importDialog
      v-if="importDialogData.isShow"
      :dialog-data="importDialogData"
      @refresh="refresh"
      @showError="showError"
    ></importDialog>
    <!-- 导入失败弹窗 -->
    <errorDialog
      v-if="errorDialogData.isShow"
      :dialog-data="errorDialogData"
      from="physicalOrder"
    ></errorDialog>
  </div>
</template>

<script>
import {
  physicalOrdersList,
  postGoods,
  editAwardOrders,
  exportOrderList,
  importUrlOrderList,
  downUrl
} from '@/api/activeList'
import { sysNormalDisable } from '@utils/dictionariesFunc'
import edit from '@component/markingActive/physicalOrders/edit'
import topSearch from '@component/markingActive/physicalOrders/topSearch'
import importDialog from '@common/importDialog' // 导入弹窗
import errorDialog from '@common/errorDialog' // 导入失败弹窗

export default {
  name: 'physicalOrders',
  msg: '实物奖品订单',
  data() {
    return {
      editData: {
        area: [],
        phone: '',
        particularAddress: ''
      },
      formInline: {
        currentTime: [],
        activityName: '',
        activityType: '',
        dpAccount: '',
        endTime: '',
        startTime: '',
        goodsName: '',
        orderStatus: '',
        phone: '',
        trackingNumber: ''
      },
      total: 0,
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      editForm: {
        show: false
      },
      tableData: [],
      deliveryName: '',
      compileId: '',
      dialogFormVisible: false,
      rules: {
        company: {
          required: true,
          message: '请填写公司名称',
          trigger: 'blur'
        },
        order: {
          required: true,
          message: '请填写单号',
          trigger: 'blur'
        }
      },
      deliveryId: {},
      information: {
        company: '',
        order: ''
      },
      // 传递给导入弹框的数据
      importDialogData: {
        type: 'physicalOrders',
        title: '实物列表订单导入',
        isShow: false, // 控制弹框显示
        params: '' // 参数
      },
      // 导入失败弹框的数据
      errorDialogData: {
        isShow: false, // 控制弹框显示
        warningText: '' // 参数
      },
      activesOptions: []
    }
  },
  components: {
    topSearch,
    edit,
    importDialog,
    errorDialog
  },
  mounted() {
    this.getList()
    this.courierCompany()
  },
  methods: {
    complete(val) {
      this.editForm.show = val
    },
    showEdit(val) {
      this.compileId = val.id
      this.deliveryName = val.deliveryAddress.deliveryName
      this.editData.phone = val.deliveryAddress.phone
      this.editData.area = [
        val.deliveryAddress.province,
        val.deliveryAddress.city,
        val.deliveryAddress.district
      ]
      this.editData.particularAddress = val.deliveryAddress.particularAddress
      this.editForm.show = true
    },
    getList() {
      let obj = { ...this.formInline, ...this.searchParams }
      delete obj.currentTime
      physicalOrdersList(
        obj,
        (res) => {
          this.tableData = res.rows
          this.total = res.total
        },
        (err) => {}
      )
    },
    compile(editData) {
      const editFormParams = editData || this.editData
      let _this = this
      let obj = {}
      obj.province = editFormParams.area[0]
      obj.city = editFormParams.area[1]
      obj.district = editFormParams.area[2]
      obj.phone = editFormParams.phone
      obj.particularAddress = editFormParams.particularAddress
      editAwardOrders(
        this.compileId,
        obj,
        (res) => {
          _this.getList()
          _this.editForm.show = false
        },
        (err) => {}
      )
    },
    // 发货
    deliverGoods(row) {
      let _this = this
      _this.deliveryId = row
      _this.dialogFormVisible = true
    },
    async courierCompany() {
      let active = await sysNormalDisable('courier_company', 'courier_company')
      let activeObj = [
        {
          dictValue: '',
          dictLabel: '全部'
        }
      ]
      this.activesOptions = activeObj.concat(active)
    },
    // 确定
    submit() {
      let _this = this
      this.$refs['delivery'].validate((valid) => {
        if (valid) {
          let id = _this.deliveryId.id
          let obj = {
            courierCompany: this.information.company,
            trackingNumber: this.information.order,
            isQueryString: true
          }
          postGoods(
            id,
            obj,
            (res) => {
              _this.getList()
            },
            (err) => {}
          )
          _this.dialogFormVisible = false
          _this.information.company = ''
          _this.information.order = ''
        } else {
          return false
        }
      })
    },
    // 导入
    importBtn() {
      this.importDialogData.url = importUrlOrderList() // 导入接口
      this.importDialogData.downUrl = exportOrderList() // 下载模板接口
      this.importDialogData.isShow = true // 显示导入弹框
    },
    /* 导入失败弹窗 */
    showError(text) {
      this.errorDialogData.isShow = true // 显示导入失败弹框
      this.errorDialogData.warningText = text // 显示导入失败弹框
    },
    // 导出
    exportFile() {
      this.$confirm('确定导出所有用户吗？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let obj = Object.assign({}, this.formInline)
          delete obj.currentTime
          let url = exportOrderList()
          this.downFile('get', url, obj, '实物订单列表导出')
        })
        .catch(() => {})
    },
    refresh() {
      this.getList()
    }
  }
}
</script>

<style lang="less" scoped></style>
